<template>
	<div class="container">
		<h1>修改密码</h1>
		<el-form class="form" label-width="120px" label-position="top">
			<el-form-item label="密码: ">
				<el-col :span="16">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model.trim="oldPsw"
					/>
				</el-col>
			</el-form-item>
			<el-form-item label="确认密码: ">
				<el-col :span="16">
					<el-input
						type="password"
						placeholder="请确认密码"
						v-model.trim="oldPsw2"
					/>
				</el-col>
			</el-form-item>
			<el-button type="primary" @click="changePassword">确认修改</el-button>
		</el-form>
	</div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
	name: "ChangePassword",
	data() {
		return {
			oldPsw: "",
			oldPsw2: "",
		};
	},
	methods: {
		changePassword() {
			if (this.oldPsw !== this.oldPsw2) {
				ElMessage({
					message: "两次密码不一致",
					type: "error",
				});
				this.oldPsw = "";
				this.oldPsw2 = "";
				return;
			}
			if (this.oldPsw === "") {
				ElMessage({
					message: "密码不能为空",
					type: "error",
				});
				return;
			}
			let requestBody = new URLSearchParams();
			requestBody.append("studentID", this.$store.getters.user.studentID);
			requestBody.append("password", this.oldPsw);
			fetch(`${this.$store.getters.point}/Student/changePassword`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = JSON.parse(result).code;
					if (parseInt(data) === 1) {
						ElMessage({
							message: "修改密码成功",
							type: "success",
						});
					} else {
						ElMessage({
							message: "修改密码失败",
							type: "error",
						});
					}
				});
		},
	},
};
</script>

<style scoped>
.container {
	font-weight: bolder;
	width: 50%;
	margin: auto;
}

.form {
	margin-top: 30px;
}
</style>
